<template>
  <div class="list-view">
    <div class="item" v-for="(item, index) in listData" :key="index">
      <img :src="imgBaseUrl(item)" alt="" class="icon">
      <div class="info">{{ item.info }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListView",
  props: {
    listData: {
      type: Array,
      default() {
        return []
      }
    },
  },
  methods: {
    imgBaseUrl(item) {
      return require('assets/img/profile/' + item.icon)
    }
  }
}
</script>

<style scoped>
.list-view {
  background-color: #ffffff;
  font-size: 15px;
  color: #333;
  margin-top: 15px;
}

.list-view .item {
  display: flex;
  height: 44px;
  line-height: 44px;
  align-items: center;
  padding-left: 10px;
}

.icon {
  width: 20px;
  height: 20px;
}
.info {
  border-bottom: 1px solid #A3A3A563;
  margin-left: 10px;
  flex: 1;
}

</style>
